<template>
  <div class="main">

    <el-table
      v-loading="loading"
      :data="list.filter(data => !search || data.reviewer.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
      height="630">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form style="margin-left: 50px" inline class="demo-table-expand">
            <el-form-item label="异常ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-circle-close"></i>
                  <span>异常ID:</span>
                </span>
              </span>
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="异常原因：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-warning-outline"></i>
                  <span>异常原因:</span>
                </span>
              </span>
              <span>{{ props.row.reason }}</span>
            </el-form-item>
            <el-form-item label="上报人：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-user"></i>
                  <span>上报人:</span>
                </span>
              </span>
              <span>{{ props.row.reviewer }}</span>
            </el-form-item>
            <el-form-item label="上报时间：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-time"></i>
                  <span>上报时间:</span>
                </span>
              </span>
              <span>{{ props.row.createTime }}</span>
            </el-form-item>
            <el-form-item label="订单ID：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-shopping-cart-1"></i>
                  <span>订单ID:</span>
                </span>
              </span>
              <span>{{ props.row.oid }}</span>
            </el-form-item>
            <el-form-item label="是否已处理完成：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-circle-check"></i>
                  <span>是否已处理:</span>
                </span>
              </span>
              <span v-if="props.row.status">已处理</span>
              <span v-if="!props.row.status">未处理</span>
            </el-form-item>
            <el-form-item label="处理结果：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-view"></i>
                  <span>处理结果:</span>
                </span>
              </span>
              <span>{{ props.row.result }}</span>
            </el-form-item>
            <el-form-item label="处理时间：">
              <span slot="label">
                <span class="span-box">
                  <i class="el-icon-odometer"></i>
                  <span>处理时间:</span>
                </span>
              </span>
              <span>{{ props.row.endTime }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单 ID"
        width="350"
        prop="oid">
      </el-table-column>
      <el-table-column
        width="220"
        label="上报时间"
        prop="createTime"
        sortable>
      </el-table-column>
      <el-table-column
        width="120"
        label="上报人"
        prop="reviewer">
      </el-table-column>
      <el-table-column label="异常处理状态" width="150">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status" type="success">处理成功</el-tag>
          <el-tag v-if="!scope.row.status" type="danger">等待处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handle(scope.$index, scope.row.id)" size="small" type="primary"
                     icon="el-icon-s-check"
                     plain>处理异常
          </el-button>
        </template>
      </el-table-column>
      <el-table-column width="240" align="right">
<!--        <template slot="header" slot-scope="scope">-->
<!--          <el-input-->
<!--            v-model="search"-->
<!--            size="mini"-->
<!--            placeholder="请输入上报人进行搜索"/>-->
<!--        </template>-->
        <template slot="header" slot-scope="scope">
          <el-form>
            <el-input v-model="reviewer"  size="mini" placeholder="请输入上报人进行搜索" style="width:150px;float: left;margin-left: 10px" />
            <el-button type="primary" size="mini" @click="searchByName">查询</el-button>
          </el-form>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align:center;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.params.page"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="this.params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total"
      >
      </el-pagination>
    </div>

    <el-dialog title="异常处理结果表单" :visible.sync="dialogFormVisible" @close="handleClose">
      <el-form ref="form" :model="form" style="width: 400px" :rules="rules">
        <el-form-item label="处理结果" label-width="120px" prop="result">
          <el-input v-model="form.result" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否处理完成" label-width="120px" prop="status">
          <el-select v-model="form.status" placeholder="请选择处理状态">
            <el-option label="处理完成" value="true"></el-option>
            <el-option label="还未完成" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {CreateOrderException, HandleOrderException, ListOrderException, UpdateOrder} from "@/api/order";
  import config from "@/config";

  export default {

    data() {
      return {
        rules: {
          result: [
            { required: true, message: '请填写处理结果！', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择是否处理完成！', trigger: ['blur','change'] }
          ],

        },
        loading: false,
        dialogFormVisible: false,
        list: [],
        form: {
          id: '',
          status: '',
          result: '',
        },
        search: '',
        total: 0,
        params: {
          page: 1,
          limit: 10,
        },
        reviewer: '',
      }
    },

    mounted() {
      this.listOeByPage()
    },

    methods: {

      loadList() {
        this.loading = true
        ListOrderException().then(res => {
          if (res.success) {
            setTimeout(() => {
              this.list = res.data
              this.loading = false
            }, 0)
          }
        })
      },

      searchByName() {
        let params = {
          page: this.params.page,
          limit: this.params.limit,
          reviewer: this.reviewer
        };
        this.$axios({
          method: 'get',
          url: config.API_URL + "/oe/like",
          params: params,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data.data)
            this.list = res.data.data.list;
            this.total = res.data.data.total;
          })
          .catch((error) => {
            let errMsg = error.response.data.msg;
            this.$message.error(errMsg)
          })
      },

      handle(index, id) {
        this.form.id = id
        this.dialogFormVisible = true
      },

      submit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            HandleOrderException(this.form).then(res => {
              if (res.success) {
                this.dialogFormVisible = false
                this.loadList()
                this.$message({
                  type: 'success',
                  message: '订单处理成功!'
                });
              }
            })
          } else {
            this.$message.error('请先完善表单相关信息！');
            return false;
          }
        });

      },

      handleClose(){
        this.$refs.form.resetFields();
      },

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.limit = val;
        this.listOeByPage();
      },

      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page = val;
        this.listOeByPage();
      },

      listOeByPage:function(){
        this.$axios({
          method: 'get',
          url: config.API_URL + "/oe/page?page=" + this.params.page + "&limit=" + this.params.limit,
          headers: {
            "Authorization": localStorage.getItem("token")
          },
        })
          .then((res) => {
            console.log(res.data);
            this.list = res.data.data.list;
            this.total = res.data.data.total;
          });
      },

    }

  }
</script>

<style scoped>
  .main {
    height: 500px
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
